<template>
  <div>
    <Myheader :page="page"></Myheader>
    <div class="procedure">
      <div class="title">
        <h3 class="top-title" ref="title"></h3>
        <!-- <ul class="weui-media-box__info">
          <li class="weui-media-box__info__meta">来源信息</li>
          <li class="weui-media-box__info__meta" ref="time"></li>
          <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其他信息</li>
        </ul> -->
        <divider ref="time">{{this.data}}</divider>
      </div>

      <div class="content">

        <div class="imgs" ref="content">
          <!-- <h1>爱汇跑</h1>
           <h2>爱汇跑</h2>
           <h3>爱汇跑</h3>
           <h4>爱汇跑</h4>
           <h5>爱汇跑</h5>
           <h6>爱汇跑</h6>
           <p>
             页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体页面主体v</p>
           <img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" @click="show(index)">
           <ol>
             <li>Lorem ipsum dolor sit amet</li>
             <li>Consectetur adipiscing elit</li>
             <li>Integer molestie lorem at massa</li>
             <li>Facilisis in pretium nisl aliquet</li>
             <li>Nulla volutpat aliquam velit</li>
             <li>Faucibus porta lacus fringilla vel</li>
             <li>Aenean sit amet erat nunc</li>
             <li>Eget porttitor lorem</li>
           </ol> -->


          <!-- <table>
            <thead>
            <tr>
              <th>标题一</th>
              <th>标题二</th>
              <th>标题三</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>单元格</td>
              <td colspan="2">单元格</td>
            </tr>
            <tr>
              <td>单元格</td>
              <td>单元格</td>
              <td>单元格</td>
            </tr>
            </tbody>
          </table> -->


          <!-- <table>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table> -->


          <!-- <a href="#">你你你你家家户户接口里，面积好几款in就会很快就很积极考虑考虑了开门红</a>
          <button>添加</button> -->
        </div>

        <div v-transfer-dom>
          <previewer :list="list" ref="previewer" :options="options"></previewer>
        </div>


      </div>
    </div>

  </div>
</template>


<script type="text/ecmascript-6">
  /* eslint-disable*/

  import { Previewer, TransferDom, XTable, Divider } from "vux";
  import Myheader from "@/common/components/myheader.vue";
  import mixin from "@/common/js/mixin";
  import qs from "qs";
  import { axios } from "@/api/axios.js";
  import {indexedDB} from "@/api/indexedDB.js";

  export default {
    mixins: [mixin],
    props: ["page",'host'],
    data() {
      return {
        titles:'',
        data: "",
        list: [],
        options: {
          getThumbBoundsFn(index) {
            // find thumbnail element
            let thumbnail = document.querySelectorAll(".impreviewer-demo-img")[
              index
              ];
            // get window scroll Y
            let pageYScroll =
              window.pageYOffset || document.documentElement.scrollTop;
            // optionally get horizontal scroll
            // get position of element relative to viewport
            //console.log(thumbnail);
            let rect = thumbnail.getBoundingClientRect();
            // w = width
            return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
            // Good guide on how to get element coordinates:
            // http://javascript.info/tutorial/coordinates
          }
        }
      };
    },
    created() {
      this.ArticleInfo()
//    this.setImg()
      // this.raceTitle()
    },
    mounted() {},
    directives: {
      TransferDom
    },
    components: {
      Previewer,
      XTable,
      Divider,
      Myheader
    },
    methods: {
      show(index) {
        this.$refs.previewer.show(index);
      },
      ArticleInfo: function() {
        this.axios
          .post(
            `${window.host}page/query`,
            qs.stringify({
              id: this.$route.query.id
            })
          )
          .then(response => {
            this.articleData = response.data.data;
//            console.log(this.articleData)
            this.$refs.title.innerText = this.articleData.name;
					//获取indexedDB存在的数据raceInfo,有进行绑定
		      indexedDB('raceInfo','get',this.RACEID,'',function(a){
						document.title = this.articleData.name + "-"+ a.name;
		      }.bind(this));
            this.data = this.articleData.created_at.split(" ")[0];
            this.$refs.content.innerHTML = this.articleData.content;
            this.setImg();
          });
      },

      setImg: function() {
        let _that = this;
        var content = document.querySelector(".content");
        if(content.getElementsByTagName("img")){
        	return false;
        }
        var imgs = content.getElementsByTagName("img");

        // console.log(imgs.length)
        //  <img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" @click="show(index)">
        for (let i = 0; i < imgs.length; i++) {
          //  console.log(imgs[i])
          // imgs[i].classList.add("img");
          imgs[i].classList.add("impreviewer-demo-img");
          var src = imgs[i].src;
          this.list.push({ src: src });
          //console.log(this.list);
          imgs[i].onclick = function() {
            //console.log(event.target)
            [].forEach.call(imgs, function(item, index) {
              // do whatever
              if (event.target == item) {
                _that.show(index);
              }
            });
          };
          // console.log(this.list)
        }
        this.list.forEach((item, index) => {
          //  console.log(index)
        });
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
  .procedure .title {
    margin: 10px;
    width: auto;
  }

  .procedure .title .top-title {
    text-align: center;
    font-weight: 400;
    // font-size: 17px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
  }

  .procedure .weui-media-box__info {
    margin-top: 15px;
    padding-bottom: 5px;
    font-size: 13px;
    color: #745e5e;
    line-height: 1em;
    list-style: none;
    overflow: hidden;
  }

  .weui-media-box__info__meta_extra {
    padding-left: 1em;
    border-left: 1px solid #745e5e;
  }

  .weui-media-box__info__meta {
    float: left;
    padding-right: 1em;
  }

  .procedure .content {
    margin-bottom: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
  }

  .procedure .content p {
    margin: 10px 0 10px;
    white-space: normal;
    color: #666;
    font-size: 13px;
    line-height: 200%;
    // overflow: hidden;
    // text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    // -webkit-line-clamp: 2;
    // margin: 8px;
  }

  .procedure .content span {
    color: #666;
    font-size: 13px;
    line-height: 160%;

    margin: 10px;
  }

  .procedure .content .imgs {
    width: 100%;
    // height: 100px;
    display: table-cell;
    vertical-align: middle;
    // text-align: center;
    padding: 10px;
  }

  .procedure .content img {
    width: 100%;
  }

  //h1标签
  .procedure .content {
    color: #666;
    box-sizing: border-box;
    h1 {
      font-weight: 500;
      line-height: 1.1;
      font-size: 36px;
      margin-bottom: 10px;
    }
    h2 {
      font-weight: 500;
      line-height: 1.1;
      font-size: 30px;
      margin-bottom: 10px;
    }
    h3 {
      font-weight: 500;
      line-height: 1.1;
      font-size: 24px;
      margin-bottom: 10px;
    }
    h4 {
      font-weight: 500;
      line-height: 1.1;
      font-size: 18px;
      margin-bottom: 10px;
    }
    h5 {
      font-weight: 500;
      line-height: 1.1;
      font-size: 14px;
      margin-bottom: 10px;
    }
    h6 {
      font-weight: 500;
      line-height: 1.1;
      font-size: 12px;
      margin-bottom: 10px;
    }
    ol,
    ul {
      color: #666;
      display: block;
      list-style-type: decimal;
      -webkit-margin-before: 1em;
      -webkit-margin-after: 1em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
      -webkit-padding-start: 40px;
    }
    li {
      display: list-item;
      text-align: -webkit-match-parent;
    }
    button {
      display: inline-block;
      padding: 4px 12px;
      margin-bottom: 0;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
      vertical-align: middle;
      cursor: pointer;
      background-image: linear-gradient(to bottom, #fff, #e6e6e6);
      background-repeat: repeat-x;
      border: 1px solid #ccc;
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
      border-bottom-color: #b3b3b3;
      border-radius: 4px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.05);
      &:hover,
      &:focus {
        color: #333;
        text-decoration: none;
        background-position: 0 -15px;
        -webkit-transition: background-position 0.1s linear;
        -moz-transition: background-position 0.1s linear;
        -o-transition: background-position 0.1s linear;
        transition: background-position 0.1s linear;
      }
    }
    a {
      color: #666;
      text-decoration: none;
      line-height: 1.75;
      font-size: 14px;
      &:hover {
        color: #c81623;
      }
      strong {
        font-weight: 700;
      }
    }
  }

  //表格
  // .procedure .content table {
  //   word-break:break-all;
  //   word-wrap: break-word;
  //   margin: 0 auto;
  //   width: 100%;
  //   line-height: 40px;
  //   position: relative;
  //   // width: 100%;
  //   border-collapse: collapse;
  //   background-color: rgb(255, 255, 255);
  //   display: table;
  //   text-align: center;
  //   vertical-align: middle;
  // }

  // .procedure .content th:nth-of-type(1) {
  //   border-top: 1px solid #c7c7c7;
  // }

  // .procedure .content th {

  //   position: relative;
  //   border-right: 0;
  //   border-bottom: 0;
  //   border: 1px solid #c7c7c7;
  //   text-align: center;
  //   font-weight: 500;
  //   display: table-cell;
  //   vertical-align: inherit;
  // }

  // .procedure .content td {
  //   text-align: center;
  //   border-right: 1px solid #c7c7c7;
  // }

  // .procedure .content tr {
  //   border: 1px solid #c7c7c7;
  // }
  .procedure table {
    width: 100%;
    max-width: 100%;
    white-space: pre;
    border-spacing: 0;
    border-collapse: collapse;
    word-break: break-all;
    word-wrap: break-word;
  }

  .procedure table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
  }

  .procedure .tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }

  .procedure thead > tr > th {
    border-bottom-width: 2px;
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    text-align: left;
    font-weight: bold;
    border: 1px solid #ddd;
    // display: table-cell;
  }

  .procedure tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
  }

  .procedure tbody > tr > td {
    border: 1px solid #ddd;
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }

  .procedure tbody > tr > th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
  }
</style>






